// 类富文本工具栏
import React, { useEffect, useState } from 'react';
import { filterObjectNullKeys } from 'src/libs/utils';
import { Select } from 'antd';
import BdhButton from 'src/pages/Components/BdhButton';
import InputColorPicker from './InputColorPicker';
import styles from '../../index.module.scss';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
	fontFamilyName: string;
	fontSizeName: string;
	fontColorName: string;
	boldName?: string;
	italicName?: string;
	underLineName?: string;
	alignHorName?: string;
	alignVerName?: string;
	fontConfig?: string[];
}

const FONT_FAMILY = [ { name: '宋体', value: 'SimSun' }, { name: '黑体', value: 'SimHei' }, { name: '微软雅黑', value: 'Microsoft YaHei' },
	{ name: '微软正黑', value: 'Microsoft JhengHei' }, { name: '新宋体', value: 'NSimSun' }, { name: '新细明体', value: 'PMingLiU' }, { name: '细明体', value: 'MingLiU' },
	{ name: '标楷体', value: 'DFKai-SB' }, { name: '仿宋', value: 'FangSong' }, { name: '楷体', value: 'KaiTi' }, 
	{ name: 'PmingLiu', value: 'PmingLiu' }, { name: 'Impact', value: 'Impact' }, { name: 'Georgia', value: 'Georgia' }, { name: 'Tahoma', value: 'Tahoma' },
	{ name: 'Arial', value: 'Arial' },{ name: 'Book Antiqua', value: 'Book Antiqua' },{ name: 'Century Gothic', value: 'Century Gothic' },
	{ name: 'Courier New', value: 'Courier New' },{ name: 'Times New Roman', value: 'Times New Roman' },{ name: 'Verdana', value: 'Verdana' }, ];

const Editor = ( props: IProps ) => {
	const { onValuesChange, form, config, fontFamilyName, fontSizeName, fontColorName, boldName,
		italicName, underLineName, alignHorName, alignVerName,
		// 设置默认全显示
		fontConfig = [ 'fontFamily', 'fontSize', 'fontColor', 'fontBold',
			'fontItalic', 'underline', 'AlignHor', 'AlignVer' ] } = props;

	const [ fontFamilyValue ] = useState( ( config.style && config.style[fontFamilyName] ) || 'SimSun' );
	const [ fontSizeValue ] = useState( ( config.style && config.style[fontSizeName] ) || '15' );
	const [ fontColorValue, setFontColor ] = useState( ( config.style && config.style[fontColorName] ) || 'rgba(134,188,37,1)' );
	const [ isBoldState, setIsBold ] = useState( ( config.style && config.style[boldName] ) || false );
	const [ italicState, setItalic ] = useState( ( config.style && config.style[italicName] ) || false );
	const [ underlineState, setUnderline ] = useState( ( config.style && config.style[underLineName] ) || false );
	// const [ alignHorValue ] = useState(config.style[alignHorName] );
	// console.log( config.style[fontFamilyName], config, fontFamilyName );

	useEffect( () => {
		setFontColor( ( config.style && config.style[fontColorName] ) || 'rgba(134,188,37,1)' );
	}, [ config, fontColorName ] );

	const { Option } = Select;

	const handleChangeFontColorComplete = ( color ) => {
		setFontColor( color );
		onToolsClick( fontColorName, color );
	};

	const handleFontSizeChange = ( value ) => {
		onToolsClick( fontSizeName, value );
	};

	const handleFontFamilyChange = value => {
		onToolsClick( fontFamilyName, value );
	};

	const onToolsClick = ( name: string, value: boolean | string ) => {
		let formValue;
		if ( typeof value === 'boolean' ) {
			formValue = {
				...form.getFieldsValue(),
				[name]: !value
			};
		} else {
			formValue = {
				...form.getFieldsValue(),
				[name]: value
			};
		}
		form.setFieldsValue( { [name]: value } );
		// console.log( name, value, formValue );
		onValuesChange( config.type, config.key, filterObjectNullKeys( formValue ), 'style' );
	};

	// 字体大小list设置
	let fontSizeArr = [];
	for ( let i = 12; i < 36; i++ ) {
		fontSizeArr.push( <Option key={i.toString()} value={i.toString()}>{i.toString()}</Option> );
	}

	// 字体设置
	const fontFamilyList = FONT_FAMILY;

	// AlignHor / AlignVer
	let alignHor, alignVer;
	switch( true ) {
		case alignHorName?.indexOf( 'title' ) > -1:
			alignHor = ( config.style && config.style.titleAlignHor ) || '';
			alignVer = ( config.style && config.style.titleAlignVer ) || '';
			break;
		case alignHorName?.indexOf( 'tableHead' ) > -1:
			alignHor = ( config.style && config.style.tableHeadAlignHor ) || '';
			alignVer = ( config.style && config.style.tableHeadAlignVer ) || '';
			break;
		case alignHorName?.indexOf( 'tableBody' ) > -1:
			alignHor = ( config.style && config.style.tableBodyAlignHor ) || '';
			alignVer = ( config.style && config.style.tableBodyAlignVer ) || '';
			break;
	}

	return (
		<div>
			<div style={{ display: 'flex' }}>
				{
					fontConfig && fontConfig.includes( 'fontFamily' ) && (
						<Select defaultValue={fontFamilyValue} style={{ flex: 1, marginRight: '5px' }} onChange={handleFontFamilyChange}>
							{
								fontFamilyList.map( t => {
									return <Option className={styles.selectWidth} title={t.value} key={t.value} value={t.value}>{t.name}</Option>;
								} )
							}
						</Select>
					)
				}

				{
					fontConfig && fontConfig.includes( 'fontSize' ) && (
						<Select defaultValue={fontSizeValue} style={{ flex: 1, marginRight: '5px' }} onChange={handleFontSizeChange}>
							{fontSizeArr}
						</Select>
					)
				}

				{
					fontConfig && fontConfig.includes( 'fontColor' ) && (
						<InputColorPicker
							style={{ flex: 1 }}
							color={fontColorValue}
							change={handleChangeFontColorComplete}
						></InputColorPicker>
					)
				}
			</div>
			<div className={styles.font_style}>
				{
					fontConfig && fontConfig.includes( 'fontBold' ) && (
						<BdhButton title="加粗" type="text"
							className={ isBoldState ? styles.btn_hover : null }
							onClick={() => { onToolsClick( boldName, isBoldState ); setIsBold( !isBoldState ); }}
							icon={<span className="iconfont bdhjiacu"></span>}>
						</BdhButton>
					)
				}

				{
					fontConfig && fontConfig.includes( 'fontItalic' ) && (
						<BdhButton title="斜体" type="text"
							className={ italicState ? styles.btn_hover : null }
							onClick={() => { onToolsClick( italicName, italicState ); setItalic( !italicState ); }}
							icon={<span className="iconfont bdhxieti"></span>}>
						</BdhButton>
					)
				}

				{
					fontConfig && fontConfig.includes( 'underline' ) && (
						<BdhButton title="下划线" type="text"
							className={ underlineState ? styles.btn_hover : null }
							onClick={() => { onToolsClick( underLineName, underlineState ); setUnderline( !underlineState ); }}
							icon={<span className="iconfont bdhxiahuaxian"></span>}>
						</BdhButton>
					)
				}

				{
					fontConfig && fontConfig.includes( 'AlignHor' ) && (
						<>
							<BdhButton title="水平居左" type="text"
								className={ alignHor === 'left' ? styles.btn_hover : null }
								onClick={() => { onToolsClick( alignHorName, 'left' ); }}
								icon={<span className="iconfont bdhzuoduiqi"></span>}>
							</BdhButton>
							<BdhButton title="水平居中" type="text"
								className={ alignHor === 'center' ? styles.btn_hover : null }
								onClick={() => { onToolsClick( alignHorName, 'center' ); }} 
								icon={<span className="iconfont bdhjuzhongduiqi"></span>}>
							</BdhButton>
							<BdhButton title="水平居右" type="text"
								className={ alignHor === 'right' ? styles.btn_hover : null }
								onClick={() => { onToolsClick( alignHorName, 'right' ); }} 
								icon={<span className="iconfont bdhyouduiqi"></span>}>
							</BdhButton>
						</>
					)
				}
				{
					fontConfig && fontConfig.includes( 'AlignVer' ) && (
						<>
							<BdhButton title="垂直居上" type="text"
								className={ alignVer === 'flex-start' ? styles.btn_hover : null }
								onClick={() => { onToolsClick( alignVerName, 'flex-start' ); }}
								icon={<span className="iconfont bdhjushang"></span>}>
							</BdhButton>
							<BdhButton title="垂直居中" type="text"
								className={ alignVer === 'center' ? styles.btn_hover : null }
								onClick={() => { onToolsClick( alignVerName, 'center' ); }} 
								icon={<span className="iconfont bdhjuzhong"></span>}>
							</BdhButton>
							<BdhButton title="垂直居下" type="text"
								className={ alignVer === 'flex-end' ? styles.btn_hover : null }
								onClick={() => { onToolsClick( alignVerName, 'flex-end' ); }} 
								icon={<span className="iconfont bdhjuxia"></span>}>
							</BdhButton>
						</>
					)

				}
			</div>
		</div>
	);

};

export default React.memo( Editor );
